<ion-view id="join" class="settings" show-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>{{'Join shared wallet' | translate}}</ion-nav-title>
  </ion-nav-bar>


  <ion-content>

    <form name="setupForm" ng-submit="join()" novalidate>

      <div class="list settings-list settings-input-group">

        <label class="item item-input item-stacked-label no-border">
          <span class="input-label" translate>Your nickname</span>
          <input type="text"
          placeholder="Satoshi"
          name="myName"
          ng-model="formData.myName"
          required>
        </label>

        <div>
          <label class="item item-input item-stacked-label no-border">
            <span class="input-label" translate>Wallet Invitation</span>
            <div class="input-notification">
              <i ng-show="!setupForm.secret.$invalid" class="icon ion-checkmark-circled valid"></i>
              <i ng-show="setupForm.secret.$invalid && formData.secret" class="icon ion-close-circled invalid"></i>
            </div>
            <input id="secret"
                   type="text"
                   placeholder="{{'Paste invitation here'|translate}}"
                   name="secret"
                   ng-model="formData.secret"
                   wallet-secret required>
          </label>
          <div class="qr-scan-icon">
            <qr-scanner class="qr-icon size-24" on-scan="onQrCodeScannedJoin(data)"></qr-scanner>
          </div>
        </div>

        <div ng-include="'views/includes/cash.html'"></div>

        <div class="item item-divider"></div>

        <a class="item" ng-click="showAdvChange()">
          <span translate ng-show="!showAdv">Show advanced options</span>
          <span translate ng-show="showAdv">Hide advanced options</span>
        </a>

        <div ng-show="showAdv">

          <label class="item item-input item-stacked-label">
            <span class="input-label">Wallet Service URL</span>
            <input type="text" id="bwsurl" name="bwsurl" ng-model="formData.bwsurl">
          </label>

          <label class="item item-input item-select">
            <div class="input-label" translate>
              Wallet Key
            </div>
            <select class="m10t"
                    ng-model="formData.seedSource"
                    ng-options="seed as seed.label for seed in seedOptions"
                    ng-change="resizeView()">
            </select>
          </label>

          <label class="item item-input item-stacked-label"
                 ng-show="formData.seedSource.id == 'trezor' || formData.seedSource.id == 'ledger'">
            <span class="input-label" translate>Account Number</span>
            <input type="number" id="account" ng-model="formData.account" ignore-mouse-wheel>
          </label>

          <label class="item item-input item-stacked-label" ng-show="formData.seedSource.id == 'set'">
            <span class="input-label" translate>Wallet Recovery Phrase</span>
            <input id="ext-master"
                   placeholder="{{'Enter the recovery phrase (BIP39)'|translate}}"
                   autocapitalize="off"
                   type="text"
                   name="privateKey"
                   ng-model="formData.privateKey">
          </label>

          <ion-toggle class="has-comment" ng-model="encrypt" toggle-class="toggle-positive" ng-change="resizeView()" ng-show="formData.seedSource.id == 'new' || formData.seedSource.id == 'set'">
            <span class="toggle-label" translate>Add a password</span>
          </ion-toggle>
          <div class="comment">
            <span ng-show="formData.seedSource.id == 'new'" translate>Add an optional password to secure the recovery phrase</span>
            <span ng-show="formData.seedSource.id == 'set'" translate>The recovery phrase could require a password to be imported</span>
          </div>

          <div class="item item-input" ng-show="encrypt">
            <input ng-show="formData.seedSource.id == 'new'"
                   placeholder="{{'Password'|translate}}"
                   type="password"
                   autocapitalize="off"
                   name="createPassphrase"
                   ng-model="formData.createPassphrase"
                   ng-change="checkPassword(formData.createPassphrase, formData.repeatPassword)"
                   ng-class="{'correct': result == 'correct', 'incorrect': result == 'incorrect'}">

            <input ng-show="formData.seedSource.id == 'set'"
                   placeholder="{{'Password'|translate}}"
                   type="password"
                   autocapitalize="off"
                   name="passphrase"
                   ng-model="formData.passphrase"
                   ng-change="checkPassword(formData.passphrase, formData.repeatPassword)"
                   ng-class="{'correct': result == 'correct', 'incorrect': result == 'incorrect'}">
          </div>

          <div class="item item-input" ng-show="encrypt">
            <input ng-show="formData.seedSource.id == 'new'"
                   placeholder="{{'Repeat password'|translate}}"
                   type="password"
                   autocapitalize="off"
                   ng-model="formData.repeatPassword"
                   ng-change="checkPassword(formData.createPassphrase, formData.repeatPassword)"
                   ng-class="{'correct': result == 'correct', 'incorrect': result == 'incorrect'}">

             <input ng-show="formData.seedSource.id == 'set'"
                    placeholder="{{'Repeat password'|translate}}"
                    type="password"
                    autocapitalize="off"
                    ng-model="formData.repeatPassword"
                    ng-change="checkPassword(formData.passphrase, formData.repeatPassword)"
                    ng-class="{'correct': result == 'correct', 'incorrect': result == 'incorrect'}">
          </div>

          <div class="text-center box-notification error" ng-show="(formData.seedSource.id =='new' || formData.seedSource.id =='set') && encrypt">
            <strong translate>This password cannot be recovered. If the password is lost, there is no way you could recover your funds.</strong>
          </div>

          <ion-checkbox ng-model="formData.passwordSaved" class="checkbox-positive" ng-show="encrypt && result == 'correct'">
            <span class="toggle-label" translate>I have written it down</span>
          </ion-checkbox>

          <label class="item item-input item-stacked-label" ng-show="formData.seedSource.id == 'set'">
            <span class="input-label" translate>Derivation Path</span>
            <input type="text"
                   placeholder="{{'BIP32 path for address derivation'|translate}}"
                   name="derivationPath"
                   ng-model="formData.derivationPath">
          </label>

        </div> <!-- advanced -->
      </div> <!-- list -->

      <button type="submit" class="button button-standard button-primary"
        ng-disabled="setupForm.$invalid || ((encrypt && !formData.passwordSaved) || encrypt && ((formData.seedSource.id == 'new' && !formData.createPassphrase) || (formData.seedSource.id == 'set' && !formData.passphrase)))"
        translate>Join
      </button>
    </form>
  </ion-content>
</ion-view>
